<template>
  <div>
    <el-button type="primary" icon="el-icon-lx-add" @click="dialogVisible = true">新建</el-button>
    <!--    <el-button type="primary" icon="el-icon-lx-add" @click="flash">刷新</el-button>-->

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :modal="false"
      :before-close="handleClose">

      <el-form :model="addCityType" :rules="rules" ref="addCityType" class="demo-ruleForm">

        <el-form-item label="城市名称" prop="cityName">
          <el-input v-model="addCityType.cityName"></el-input>
        </el-form-item>

        <el-form-item label="城市描述" prop="content">
          <el-input v-model="addCityType.content"></el-input>
        </el-form-item>

        <el-form-item label="标题" prop="title">
          <el-input v-model="addCityType.title"></el-input>
        </el-form-item>

        <el-form-item label="作者" prop="author">
          <el-input v-model="addCityType.author"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveCityType('addCityType')">保 存</el-button>
  </span>
    </el-dialog>

    <div class="container">

      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column prop="id" label="编码" width="55" align="center"></el-table-column>
        <el-table-column prop="cityName" label="城市名称" width="55" align="center"></el-table-column>
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="content" :show-overflow-tooltip="true" label="描述"></el-table-column>
        <el-table-column prop="author" label="作者"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-folder"
              @click="getView(scope.row)"
            >查看详情
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="updateCity(scope.row)" size="small">编辑
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-folder"
              @click="removeCity(scope.row)" size="small">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="currentPage"
          :page-size="size"
          @current-change="getData">
        </el-pagination>
      </div>
    </div>

    <!--        查询-->
    <!--    <el-dialog title="详细信息" :modal="false" :visible.sync="selectVisible" width="70%">-->
    <!--      <el-table :data="tableData">-->
    <!--        <el-table-column property="id" label="ID" width="150"></el-table-column>-->
    <!--        <el-table-column property="cityName" label="城市名" width="200"></el-table-column>-->


    <!--      </el-table>-->


    <!--      <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="selectVisible = false">关闭</el-button>-->
    <!--      </span>-->
    <!--    </el-dialog>-->
    <el-dialog
      title="提示"
      :modal="false"
      :visible.sync="viewVisible"
      width="30%"
      :before-close="handleClose">

      <el-form :model="cityTypeView" :rules="rules" ref="cityTypeView" class="demo-ruleForm">

        <el-form-item label="编码" prop="id">
          <el-input v-model="cityTypeView.id" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="城市名称" prop="cityName">
          <el-input v-model="cityTypeView.cityName" :disabled="true"></el-input>
        </el-form-item>

        <hr>

        <el-form-item label="城市流览图">
          <br>
          <el-row>
            <el-col :span="8" v-for="(pic, index) in imageList">
              <el-card :body-style="{ padding: '0px' }">
                <img :src="pic.imageUrl" class="image">
                <div style="padding: 14px;">
                  <div class="bottom clearfix">
                    <el-button type="text" @click="removePic(pic.id)" class="button">删 除</el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-form-item>

        <el-upload
          class="avatar-uploader"
          action="http://8.135.35.123:9000/hotelsystem/floor/uploadImg"
          :show-file-list="false"
          :on-success="handleUploadSuccess"
          multiple>
          <br>
          <i class="el-icon-plus avatar-uploader-icon">上传图片</i>
        </el-upload>

      </el-form>


      <span slot="footer" class="dialog-footer">
    <el-button @click="viewVisible = false">取 消</el-button>
            <el-button type="primary" @click="modCityType">保 存</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="updateDisable"
      width="30%"
      :modal="false"
      :before-close="handleClose">
      <el-form ref="viewCity" :model="form" label-width="80px">


        <el-form-item label="编码:">
          <el-input v-model="viewCity.id" :disabled="true"></el-input>
        </el-form-item>

        <el-form-item label="城市名:">
          <el-input v-model="viewCity.cityName" v-bind:disabled="canEdit"></el-input>
        </el-form-item>

        <el-form-item label="内容:">
          <el-input v-model="viewCity.content" v-bind:disabled="canEdit"></el-input>
        </el-form-item>

        <el-form-item label="作者:">
          <el-input v-model="viewCity.author" v-bind:disabled="canEdit"></el-input>
        </el-form-item>

      </el-form>
      <el-button @click="toEdit()" v-show="isView">编 辑</el-button>
      <el-button type="primary" v-show="isEdit" @click="modCity()">保 存</el-button>
    </el-dialog>

  </div>

</template>

<script>
  import { updateOrder } from '../../network/updateOrder'
  import { cityList } from '../../network/cityList'
  import { orderdelete } from '../../network/orderDelete'
  import { searchOrder } from '../../network/searchOrder'
  import { cityView } from '../../network/cityView'

  export default {
    name: 'CityManage',
    data () {
      return {
        rules: {
          id: [{
            required: true,
            message: '角色ID',
            trigger: 'blur',
          }],
          cityName: [{
            required: true,
            message: '城市ID',
            trigger: 'blur',
          }],
          author: [{
            required: true,
            message: '用户ID',
            trigger: 'blur',
          }],
          title: [{
            required: true,
            message: '状态',
            trigger: 'blur',
          }],
        },

        // 查询的相关参数
        query: {
          idcard: '',
          pageIndex: 1, // 当前请求页
          size: 5, // 一页显示的数据条数
        },

        cityTypeView: {
          id: '',
          cityName: '',
        },
        viewCity: {
          id: '',
          cityName: '',
          content: '',
          author: '',
          title: '',
        },
        addCityType: {
          cityName: '',
          content: '',
          imageUrl: '',
          author: '',
          title: '',
        },
        viewCity: {},
        imageList: [],
        tableData: [], // 获取的数据
        // multipleSelection: [],
        isView: true,
        isEdit: false,
        canEdit: true,
        editVisible: false, // 编辑弹出框false隐藏，true显示
        updateDisable: false,
        selectVisible: false,
        dialogVisible: false,
        viewVisible: false, // 新建弹出框false隐藏，true显示
        addVisible: false,
        form: {},
        total: 0,
        size: 10,
        currentPage: 1,
        idx: -1,
        id: 1,
        status: '',
        orderStatusList: [],
        checkinTime: '',
        checkoutTime: '',
        statusKey: '',
        payTime: '',
        createTime: '',
        roleId: '',
        userId: '',
        // size: 10,
        // current: 1,
        // idx: -1,
        // id: -1,
        // dialogVisible: false,
      }
    },
    created () {
      this.getData()

      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/listByDictName?status=hotelRoomStatus').then(function (res) {
        if (res.data.code == 80200) {
          _this.roomStatusList = res.data.data
        }
      })

      // let myName=JSON.parse(sessionStorage.getItem("id"));
      // alert(myName)
      // getAllImageUrl(id)
      // {
      //   var _this = this
      //   _this.$http.post('http://8.135.35.123:9000/hotelsystem/cityImage/getImageList?cityId=' + id + '&type=' + 0).then(function (res) {
      //     _this.imageList = res.data.data
      //     // _this.$http.post('http://8.135.35.123:9000/hotelsystem/city/getUrlList?cityId=' + id + "&type=" + 0).then(function (res) {
      //     //   console.log(res);
      //     //   _this.srcList = res.data.data;
      //     // })
      //   })
      // }
    },
    methods: {
      // 初始化数据
      getData (currentPage) {
        console.log('表单')
        cityList(currentPage)
          .then((res) => {
            console.log(res)
            if (res.data.code === 80200) {
              console.log(res)
              this.tableData = res.data.data.records
              this.tableData.forEach(item => {
                item.status = Boolean(item.status)
              })

              this.total = res.data.data.total
              this.size = res.data.data.size
              this.current = res.data.data.current
            } else {
              this.$message.error('数据获取失败，' + res.data.data.msg)
            }
          })
          .catch(() => {
            this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址或参数是否正确')
          })
      },
      // updateCity(index,row){
      //   this.idx = index
      //   this.form = row
      //   this.updateDisable=true;
      // },
      toEdit () {
        this.canEdit = false
        this.isEdit = true
        this.isView = false
      },
      getView (row) {
        this.viewVisible = true
        var _this = this
        this.$http.post('http://8.135.35.123:9000/hotelsystem/city/view?cityId=' + row.id).then(function (res) {
          if (res.data.code == 80200) {
            _this.cityTypeView = res.data.data
            _this.getAllImageUrl(row.id)
          } else {
            alert(res.data.msg)
          }
        })
      },
      getAllImageUrl (id) {
        var _this = this
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/cityImage/getImageList?cityId=' + id).then(function (res) {
          _this.imageList = res.data.data
          // _this.$http.post('http://8.135.35.123:9000/hotelsystem/city/getUrlList?cityId=' + id + "&type=" + 0).then(function (res) {
          console.log(res)
          //   _this.srcList = res.data.data;
          // })
        })
      },
      handleUploadSuccess (res) {
        this.imageUrl = res.data
        var vo = new URLSearchParams()
        vo.append('imageUrl', this.imageUrl)
        vo.append('cityId', this.cityTypeView.id)
        vo.append('isDelete', 0)
        // vo.append('createId', JSON.parse(sessionStorage.getItem("id")))
        var _this = this
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/cityImage/add', vo).then(function (res) {
          alert(res.data.msg)
          _this.getAllImageUrl(_this.cityTypeView.id)
        })
      },
      removePic(id){
        var _this = this;
        this.$http.post('http://8.135.35.123:9000/hotelsystem/cityImage/remove?id='+id).then(function (res) {
          if (res.data.code == 80200) {
            _this.getAllImageUrl(_this.cityTypeView.id);
            alert(res.data.msg);
          }else {
            alert(res.data.msg);
          }
        })
      },
      flash () {
        location.reload()
      },
      OrderUpdate (index, row) {
        this.idx = index
        this.form = row
        this.editVisible = true
      },

      saveCityType (addCityType) {
        var _this = this
        this.$refs[addCityType].validate((valid) => {
          if (valid) {
            var vo = new URLSearchParams()
            vo.append('cityName', this.addCityType.cityName)
            vo.append('imageUrl', this.addCityType.imageUrl)
            vo.append('content', this.addCityType.content)
            vo.append('author', this.addCityType.author)
            vo.append('title', this.addCityType.title)
            this.$http.post('http://8.135.35.123:9000/hotelsystem/city/add', vo).then(function (res) {
              if (res.data.code == 80200) {
                alert(res.data.msg)
                location.reload()
              } else {
                alert(res.data.msg)
              }
            })
          }
        })
      },

      removeCity (row) {
        this.$http.post('http://8.135.35.123:9000/hotelsystem/city/remove?cityId=' + row.id).then(function (res) {
          if (res.data.code == 80200) {
            alert(res.data.msg)
            location.reload()
          } else {
            alert(res.data.msg)
          }
        })
      },
      updateCity (row) {
        this.updateDisable = true
        var _this = this
        this.$http.post('http://8.135.35.123:9000/hotelsystem/city/view?cityId=' + row.id).then(function (res) {
          if (res.data.code == 80200) {
            _this.viewCity = res.data.data
            // _this.getAllImageUrl(row.id);
          } else {
            alert(res.data.msg)
          }
        })
      },
      modCity () {
        var vo = new URLSearchParams()
        vo.append('id', this.viewCity.id)
        vo.append('cityName', this.viewCity.cityName)
        vo.append('content', this.viewCity.content)
        vo.append('author', this.viewCity.author)
        vo.append('title', this.viewCity.title)
        var _this = this
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/city/mod', vo).then(function (res) {
          if (res.data.code == 80200) {
            alert(res.data.msg)
            location.reload()
          } else {
            alert(res.data.msg)
          }
        })
      },
      // 删除操作
      Orderdelete (index, row) {
        // 二次确认删除
        this.$confirm('确定要删除吗？', '提示', {
          type: 'warning',
        }).then(() => {
          orderdelete(row.id).then((res) => {
            // alert(row.id);
            console.log(res)
            if (res.data.code === 80200) {
              this.$message.success('删除成功')
              // this.tableData.splice(index, 1);
              this.getData()
            } else {
              this.$message.error('删除失败')
              this.getData()
            }
          })
        })
      },

      handleSearch () {
        if (this.query.idcard == '') {
          this.getData()
        } else {
          // this.getData();
          console.log('表单')
          searchOrder(this.query.idcard)
            .then((res) => {
              console.log(res)
              if (res.data.code === 80200) {
                console.log(res)
                this.tableData = res.data.data.records
                this.tableData.forEach(item => {
                  item.status = Boolean(item.status)
                })
                this.size = res.data.data.size
                this.total = res.data.data.total
              } else {
                this.$message.error('数据获取失败，' + res.msg)
              }
            })
            .catch(() => {
              this.$message.error('数据获取失败，请在保证网络畅通的情况下检查请求的地址或参数是否正确')
            })
        }
      },
      // 查询操作
      HandleSelect (row) {
        this.selectVisible = true
        let formData = new FormData
        formData.append('cityId', row.id)
        console.log(row.id)
        cityView(formData).then((res) => {
          console.log(res)
          if (res.data.code === 80200) {
            this.tableData = []
            this.tableData.push(res.data.data)
            //this.tableData.splice(index, 1);

          } else {
            this.$message.error('查询失败')
            this.getData()
          }
        })
      },
      // alert('查询操作');

      // handleClose () {
      //
      // },
      view () {

      },
      // 分页导航
      handlePageChange (val) {
        alert('请求的页数：' + val)

        // 调用方法：this.$set( target, key, value )
        // target：要更改的数据源(可以是对象或者数组)
        // key：要更改的具体数据
        // value ：重新赋的值
        this.$set(this.query, 'pageIndex', val)
        this.getData(val)
      },

      formatJson (filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },

    },
  }


</script>

<style>
  .image {
    height: 150px;
    width: 100%;
    display: block;
  }
</style>
